<template>
  <div>

    <div class="login">
      <h3 style="text-align:center;color:orange">登录</h3>
      <el-form
        label-width="80px"
        label-position="top"
        class="login_box"
      >
        <el-form-item label="手机号码">
          <el-input
            v-model="username"
            placeholder="请输入您的手机号码"
          ></el-input>
          <p class="tishi">{{nametxt}}</p>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="pwd"
            placeholder="请输入密码"
            type="password"
          ></el-input>
          <p class="tishi">
            {{pwdtxt}}</p>
        </el-form-item>
        <el-form-item label="">
          <el-row>
            <el-col :span="21">
              <el-checkbox v-model="istrue">七天免登录</el-checkbox>
            </el-col>
            <el-col :span="3">
              <span>
                <router-link to="/login/register">用户注册</router-link>
              </span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            class="btn"
            @click="login"
          >立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login_form",
  data() {
    return {
      username: "",
      pwd: "",
      nametxt: "",
      pwdtxt: "",
      istrue: false,
    };
  },
  methods: {
    //   登录
    login() {
      if (this.username == "" && this.pwd == "") {
        this.nametxt = "用户名不能为空";
        this.pwdtxt = "密码不能为空";
      } else if (this.pwd == "") {
        this.pwdtxt = "密码不能为空";
      } else if (this.username == "") {
        this.pwdtxt = "用户名不能为空";
      } else {
        this.$post(this.url + "/user/login", {
          userName: this.username,
          pwd: this.pwd,
        }).then((res) => {
          if (res.errorCode == 0) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            this.$store.state.user = res.data;
            sessionStorage.setItem("user", JSON.stringify(res.data));
            if (this.istrue == true) {
              var date = new Date();
              var time = date.getSeconds();
              sessionStorage.setItem("logintime", time);
              console.log(time);
            }
            this.$router.push("/home");
            // location.reload();
          } else {
            this.$message({
              message: "账号密码错误",
              type: "info",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.btn {
  width: 100%;
}
.tishi {
  margin: 0;
  color: red;
}
.bot_a {
  text-align: center;
  color: red;
  word-spacing: 15px;
}
.login {
  width: 35%;
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
}
.login_box {
  width: 85%;
  margin: 0 auto;
  padding-bottom: 25px;
}
</style>